<template>
  <div v-if="vipDetail">
    <!-- 退卡弹框 -->
    <el-dialog title="退卡" :visible.sync="dialogVisible" width="750px" :close-on-click-modal="false">
      <div v-loading="dialogLoading" class="dialog-del" element-loading-text="退卡中">
        <ul class="info-avatar">
          <li class="avatar">
            <img v-if="vipDetail.customer.headImg" :src="vipDetail.customer.headImg" alt>
          </li>
          <li
            class="name"
          >{{ vipDetail.member.name?vipDetail.member.name:vipDetail.customer.nickName }}</li>
        </ul>
        <div class="flexRBS">
          <div class="dialog-l">
            <div class="info-content">
              <info-list-card :data="balanceCard" />
            </div>
          </div>
          <div class="dialog-r">
            <div class="info-content">
              <!-- <info-list-card :data="balanceCard"></info-list-card> -->
            </div>
          </div>
        </div>
        <div class="app-main-tips-box">
          <div class="title">
            <i class="el-icon-warning" /> 退卡须知
          </div>
          <ul>
            <li>1.退卡前请与顾客联系确定实充账户余额的处理。</li>
            <li>2.操作退卡后，该顾客会员卡的余额、积分和会员权益将会失效，并无法恢复。</li>
            <li>3.退卡后，顾客可以重新注册会员，但无法恢复以往数据。</li>
          </ul>
        </div>
        <div class="form">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item prop="reason" label="退卡原因">
              <el-input
                v-model="form.reason"
                type="textarea"
                placeholder="请输入原因"
                :autosize="{ minRows: 2, maxRows: 10}"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="danger" @click="handleSubmit('form')">退 卡</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cancelVipCardById } from '@/api/vip'
import { validateStrLen } from '@/utils/validate.js'
export default {
  props: {
    vipDetail: {
      type: Object,
      require: true
    }
  },
  data() {
    const validateReason = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入原因'))
      } else if (!validateStrLen(value, 60)) {
        callback(new Error('长度不超过30个汉字或60个字符'))
      } else {
        callback()
      }
    }
    return {
      // 表单规则
      rules: {
        reason: [
          {
            required: true,
            validator: validateReason,
            trigger: ['blur', 'change']
          }
        ]
      },
      dialogVisible: false,
      dialogLoading: false,
      balanceCard: null,
      form: {
        reason: ''
      }
    }
  },
  methods: {
    open(balanceCard) {
      this.balanceCard = balanceCard
      this.show()
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.dialogLoading = false
      this.dialogVisible = false
    },

    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm(
            `您确定要对会员${
              this.vipDetail.member.name
            }进行退卡处理, 是否继续?`,
            '温馨提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true,
              roundButton: true
            }
          ).then(() => {
            this.dialogLoading = true
            const params = {}
            params.memberId = this.vipDetail.member.id
            params.reason = this.form.reason
            cancelVipCardById(params)
              .then(res => {
                this.vipDetail.member.status = 3
                this.$notify({
                  title: '成功',
                  message: '会员已退卡成功',
                  type: 'success',
                  duration: 2000,
                  offset: 40
                })
                this.$refs.form.resetFields()
                this.hide()
                this.$router.push({ name: 'VipList' })
              })
              .catch(res => {
                this.dialogLoading = false
              })
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 退卡弹框 */
  .dialog-del {
    .info-avatar {
      height: 40px;
      margin: 15px 0;
      li {
        float: left;
        margin-right: 10px;
      }
      .avatar {
        overflow: hidden;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #e7e7e7;
      }
      .name {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        color: $dark-font-color;
      }
    }
    .info-content {
      margin-left: 45px;
    }
    .dialog-l {
      width: 50%;
    }
    .dialog-r {
      width: 50%;
      border-left: 1px solid #e6e6e6;
    }
    // 输入框
    .form {
      margin-top: 20px;
    }
  }
</style>
